<template>
    <view class="container">
        <!-- 经纬度显示（顶部固定，不被地图遮挡） -->
        <!-- #ifdef H5 -->
        <view class="lat-lng-info-fixed" :class="isApp ? 'lat-lng-info-app' : ''" v-if="centerLngLat" style="top: 5%;">
            地图中心经纬度：{{ centerLngLat.latitude.toFixed(6) }}, {{ centerLngLat.longitude.toFixed(6) }}
        </view>
        <!-- #endif -->
        <!-- #ifdef APP -->
        <view class="lat-lng-info-fixed" :class="isApp ? 'lat-lng-info-app' : ''" v-if="centerLngLat" style="top: -2%;">
            地图中心经纬度：{{ centerLngLat.latitude.toFixed(6) }}, {{ centerLngLat.longitude.toFixed(6) }}
        </view>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <view class="lat-lng-info-fixed" :class="isApp ? 'lat-lng-info-app' : ''" v-if="centerLngLat">
            地图中心经纬度：{{ centerLngLat.latitude.toFixed(6) }}, {{ centerLngLat.longitude.toFixed(6) }}
        </view>
        <!-- #endif -->

        <!-- 地图组件（高度减去顶部信息高度） -->
        <map id="myMap" :longitude="center.longitude" :latitude="center.latitude" :markers="markers" :scale="scale"
            style="width: 100%; height: calc(100vh - 60px); margin-top: 60px;" @regionchange="handleRegionChange"></map>

        <!-- 隐藏的 Canvas，用于绘制图标 -->
        <canvas canvas-id="markerCanvas" :style="{ 
            width: canvasSize + 'px', 
            height: canvasSize + 'px', 
            position: 'fixed', 
            top: '-1000px', 
            left: '-1000px' 
        }"></canvas>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 地图中心（中国区域）
            center: {
                longitude: 116.404,
                latitude: 39.915
            },
            // 地图缩放级别
            scale: 5,
            // 标记点数据
            markers: [],
            // 基础尺寸（H5/APP 端）
            baseSize: 40,
            // 标记点坐标（可扩展）
            markerPoints: [
                {
                    longitude: 116.407,
                    latitude: 39.909
                },
                {
                    longitude: 121.473,
                    latitude: 31.230
                },
                {
                    longitude: 117.283,
                    latitude: 31.861
                },
                {
                    longitude: 113.264,
                    latitude: 23.129
                }
            ],
            // 实时中心经纬度
            centerLngLat: null,
            // 平台判断
            isApp: false,
            // 记录上一次的缩放级别
            lastScale: 5,
            // 缩放计时器
            scaleTimer: null
        };
    },

    computed: {
        // 区分平台的动态尺寸：小程序端单独缩小
        canvasSize() {
            const platform = uni.getSystemInfoSync().platform;
            if (platform === 'mp-weixin') {
                return this.baseSize * 0.5;
            }
            return this.baseSize;
        }
    },

    onReady() {
        // 判断平台类型
        this.isApp = uni.getSystemInfoSync().platform === 'android' ||
            uni.getSystemInfoSync().platform === 'ios';

        // 初始化标记点（自动适配三端）
        this.initMarkers();

        // APP端延迟获取中心经纬度，确保地图完全加载
        if (this.isApp) {
            setTimeout(() => this.getMapCenter(), 800);
        } else {
            this.getMapCenter();
        }

        // 监听地图缩放变化（针对小程序特殊处理）
        // #ifdef MP
        this.watchMapScale();
        // #endif
    },

    methods: {
        // 初始化标记点（绘制 Canvas + 生成 Marker）
        initMarkers() {
            const ctx = uni.createCanvasContext('markerCanvas', this);
            this.drawMarker(ctx, this.canvasSize);

            ctx.draw(false, () => {
                uni.canvasToTempFilePath({
                    canvasId: 'markerCanvas',
                    success: (res) => {
                        this.markers = this.markerPoints.map((point, index) => ({
                            id: index,
                            longitude: point.longitude,
                            latitude: point.latitude,
                            iconPath: res.tempFilePath,
                            width: this.canvasSize,
                            height: this.canvasSize,
                            anchor: {
                                x: 0.5,
                                y: 0.5
                            }
                        }));
                    },
                    fail: (err) => {
                        console.error('Canvas 转换失败:', err);
                    }
                }, this);
            });
        },

        // 绘制标记图标（自动适配尺寸）
        drawMarker(ctx, size) {
            ctx.clearRect(0, 0, size, size);
            ctx.beginPath();
            ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI);
            ctx.setFillStyle('#666');
            ctx.fill();
            ctx.setFontSize(14 * (size / 40));
            ctx.setTextAlign('center');
            ctx.setTextBaseline('middle');
            ctx.setFillStyle('#fff');
            ctx.fillText('V', size / 2, size / 2);
        },

        // 地图视野变化事件（缩放、平移等操作都会触发）
        handleRegionChange(e) {
            // #ifdef MP
            // 小程序端特殊处理
            if (e.type === 'end') {
                // 防抖处理
                if (this._regionChangeTimer) {
                    clearTimeout(this._regionChangeTimer);
                }
                this._regionChangeTimer = setTimeout(() => {
                    this.getMapCenter();
                    
                    // 额外检查缩放级别是否变化
                    const mapCtx = uni.createMapContext('myMap', this);
                    mapCtx.getScale({
                        success: (res) => {
                            if (this.scale !== res.scale) {
                                this.scale = res.scale;
                                this.getMapCenter(); // 确保缩放时也更新中心
                            }
                        }
                    });
                }, 100);
            }
            // #endif
            
            // #ifndef MP
            // 非小程序端，原有逻辑
            if (this._regionChangeTimer) {
                clearTimeout(this._regionChangeTimer);
            }
            this._regionChangeTimer = setTimeout(() => {
                this.getMapCenter();
            }, 100);
            // #endif
        },

        // 专门监听地图缩放变化（小程序端）
        watchMapScale() {
            // 定期检查缩放级别是否变化
            this.scaleTimer = setInterval(() => {
                const mapCtx = uni.createMapContext('myMap', this);
                mapCtx.getScale({
                    success: (res) => {
                        if (this.scale !== res.scale) {
                            // 缩放级别变化了，更新状态
                            this.lastScale = this.scale;
                            this.scale = res.scale;
                            
                            // 获取新的中心经纬度
                            this.getMapCenter();
                        }
                    }
                });
            }, 300);
        },

        // 获取地图中心经纬度
        getMapCenter() {
            const mapCtx = uni.createMapContext('myMap', this);
            mapCtx.getCenterLocation({
                success: (res) => {
                    this.centerLngLat = {
                        latitude: res.latitude,
                        longitude: res.longitude
                    };
                    // 同步更新地图中心坐标
                    this.center.latitude = res.latitude;
                    this.center.longitude = res.longitude;
                    
                    console.log('地图中心更新:', this.centerLngLat);
                },
                fail: (err) => {
                    console.error('获取地图中心经纬度失败:', err);
                    // APP端获取失败时重试
                    if (this.isApp) {
                        setTimeout(() => this.getMapCenter(), 500);
                    }
                }
            });
        },

        // 组件销毁时清理定时器
        onUnload() {
            if (this._regionChangeTimer) {
                clearTimeout(this._regionChangeTimer);
            }
            // #ifdef MP
            if (this.scaleTimer) {
                clearInterval(this.scaleTimer);
            }
            // #endif
        }
    }
};
</script>

<style scoped>
.container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* 顶部固定经纬度信息，避免被地图遮挡 */
.lat-lng-info-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 60px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-size: 15px;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* APP端特殊样式 */
.lat-lng-info-app {
    top: 5%;
    left: 0;
    height: 60px;
    padding-left: 25px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: translateZ(100px);
}

/* 兼容原有样式，防止误用 */
.lat-lng-info {
    display: none;
}
</style>    